<template>
  <su-fixed bottom placeholder bg="bg-white">
    <view class="ui-tabbar-box">
      <view class="ui-tabbar ss-flex ss-col-center ss-row-between">
        <view
          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
          @tap="gethome"
        >
          <image
            class="item-icon"
            src="/static/shouye.png"
            mode="aspectFit"
          ></image> 
          <view class="item-title">首页</view>
        </view>
        <!--    @tap="onChat" -->
        <view
          v-if="serviceIcon"
          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center kefu"
       
        >
        <button  open-type="contact" class="btn">
						
          </button>
          <view class="keview">
            <image
              class="item-icon"
              :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/message.png')"
              mode="aspectFit"
            ></image>
            <view class="item-title" style="margin-top: 3rpx;">客服</view>
          </view>
        
        </view>
        <view
          v-if="serviceIcon"
          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
          @tap="ongouwu"
        >
        <view class="shuliang" v-if="nums!=0&&nums!=''">{{nums}}</view>
          <image
            class="item-icon"
            src="/static/gouwuche.png"
            mode="aspectFit"
          ></image>
          <view class="item-title">购物车</view>
        </view>
        <!-- <view
          v-if="collectIcon"
          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
          @tap="onFavorite"
        >
          <block v-if="modelValue.favorite">
            <image
              class="item-icon"
              :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/collect_1.gif')"
              mode="aspectFit"
            ></image>
            <view class="item-title">已收藏</view>
          </block>
          <block v-else>
            <image
              class="item-icon"
              :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/collect_0.png')"
              mode="aspectFit"
            ></image>
            <view class="item-title">收藏</view>
          </block>
        </view>  -->
        <!-- <view
          v-if="shareIcon"
          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
          @tap="showShareModal"
        >
          <image
            class="item-icon"
            :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/share.png')"
            mode="aspectFit"
          ></image>
          <view class="item-title">分享</view>
        </view> -->
        <slot></slot>
      </view>
    </view>
  </su-fixed>
</template>

<script setup>
  /**
   *
   * 底部导航
   *
   * @property {String} bg 			 			- 背景颜色Class
   * @property {String} ui 			 			- 自定义样式Class
   * @property {Boolean} noFixed 		 			- 是否定位
   * @property {Boolean} topRadius 		 		- 上圆角
   *
   *
   */

  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';
  import { showShareModal } from '@/sheep/hooks/useModal';
  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
  // 数据
  const state = reactive({});

  // 接收参数
  const props = defineProps({
    modelValue: {
      type: Object,
      default() {},
    },
    bg: {
      type: String,
      default: 'bg-white',
    },
    bgStyles: {
      type: Object,
      default() {},
    },
    ui: {
      type: String,
      default: '',
    },

    noFixed: {
      type: Boolean,
      default: false,
    },
    topRadius: {
      type: Number,
      default: 0,
    },
    collectIcon: {
      type: Boolean,
      default: true,
    },
    serviceIcon: {
      type: Boolean,
      default: true,
    },
    shareIcon: {
      type: Boolean,
      default: true,
    },
    nums:{
      type: Number,
      default: 0,
    }
  });
  const elStyles = computed(() => {
    return {
      'border-top-left-radius': props.topRadius + 'rpx',
      'border-top-right-radius': props.topRadius + 'rpx',
      overflow: 'hidden',
    };
  });

  const tabbarheight = (e) => {
    uni.setStorageSync('tabbar', e);
  };
  async function onFavorite() {
    const { code } = await sheep.$api.user.favorite.do(props.modelValue.id);
    if (code === 1) {
      if (props.modelValue.favorite) {
        props.modelValue.favorite = 0;
      } else {
        props.modelValue.favorite = 1;
      }
    }
  }
  function gethome(){
    uni.switchTab({ url: '/pages/index/index' })
  }

  const onChat = () => {
    sheep.$router.go('/pages/chat/index', {
      id: props.modelValue.id,
    });
  };
  const ongouwu =() =>{
    uni.switchTab({ url: '/pages/index/cart' })
  }
  onLoad(async (options) => {
    // 非法参数
    console.log("++++")
  });
</script>

<style lang="scss" scoped>
  .ui-tabbar-box {
    box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
  }
  .ui-tabbar {
    display: flex;
    height: 50px;
    background: #fff;

    .detail-tabbar-item {
      width: 100rpx;
      position: relative;

      .item-icon {
        width: 40rpx;
        height: 40rpx;
      }

      .item-title {
        font-size: 20rpx;
        font-weight: 500;
        line-height: 20rpx;
        margin-top: 12rpx;
      }
    }
  }
  .shuliang{
    position: absolute;
    padding: 4rpx;
    background-color: red;
    color: #fff;
    font-size: 20rpx;
    font-weight: 400;
    border-radius: 50%;
    right: 13%;
    min-width: 27rpx;
    top: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
  .btn{
      position: absolute;
      background-color: transparent;
      width: 100%;
      height: 100%;
      z-index: 1;
      left: 0;
      border: none !important;
    }
</style>

<style>
.kefu button:after {
      border: none;
  }
</style>